<template>
	<up-dropdown-item :title="dropItemTitle">
		<view class="dropdown-content">
			<scroll-view scroll-y class="group-content">
				<template v-for="(groupArr, index) in splitArr" :key="index" class="filter-group">
					<view v-for="(group, index) in groupArr.data" :key="index" class="filter-group">
						<view class="group-title" v-if="group.groupName">{{ group.groupName }}</view>
						<view class="flex-wrap">
							<view
								v-for="(item, index) in group.items"
								:key="index"
								:class="['group-item', { selected: isSelected(item.id, group.key) }]"
								@click="selectItem(item, group.key)"
							>
								{{ item.name }}
							</view>
						</view>
					</view>
				</template>
			</scroll-view>
			<!-- 底部按钮 -->
			<view class="bottom-bd-top p-24 flex">
				<zjy-button pd="60" type="line" @click="reset">重置</zjy-button>
				<view class="ml-18 flex-1">
					<zjy-button @click="submit">确认筛选</zjy-button>
				</view>
			</view>
		</view>
	</up-dropdown-item>
</template>
<script setup>
const props = defineProps({
	modelValue: String,
	title: String,
	keyName: String,
	data: {
		type: Array,
		default: () => [],
	},
})
const emit = defineEmits(["update:modelValue", "updateGroupValue", "close"])
const selectItem = (item, groupKey) => {
	// 先找到对应key的对象
	const targetGroup = splitArr.value.find((group) => group.key === groupKey)
	if (targetGroup) {
		const index = targetGroup.ids.indexOf(item.id.toString())
		if (index > -1) {
			// 如果值已经存在，就删除它
			targetGroup.ids.splice(index, 1)
			targetGroup.value.splice(index, 1)
			targetGroup.names.splice(index, 1)
		} else {
			// 如果值不存在，就添加它
			targetGroup.ids.push(item.id.toString())
			targetGroup.value.push(item.value)
			targetGroup.names.push(item.name)
		}
	}

	emit("updateGroupValue", getModelValue())
}

const getModelValue = () => {
	return (splitArr.value || []).map((group) => ({
		id: group.id,
		key: group.key,
		value: group.value,
	}))
}

const isSelected = (itemId, groupKey) => {
	const targetGroup = splitArr.value.find((group) => group.key === groupKey)
	if (targetGroup) {
		return targetGroup.ids.includes(itemId.toString())
	}
	return false
}
const dropItemTitle = computed(() => {
	const nameArr = splitArr.value.map((group) => group.names).reduce((acc, curr) => acc.concat(curr), [])
	if (!nameArr.length) {
		return props.title
	}
	if (nameArr.length > 1) {
		return "多选"
	}
	return nameArr[0]
})

const splitArr = ref([])
onMounted(() => {
	// 先给没有key的项分配key值为attr
	const dataWithAttrKey = props.data.map((item) => {
		if (!item.hasOwnProperty("key")) {
			return { ...item, key: props.keyName }
		}
		return item
	})

	// 根据不同的key分割成不同的数组，并整理成指定格式
	const keyValueMap = new Map()
	dataWithAttrKey.forEach((item) => {
		const key = item.key
		if (!keyValueMap.has(key)) {
			keyValueMap.set(key, {
				key: key,
				value: [],
				ids: [],
				names: [],
				data: [],
			})
		}
		keyValueMap.get(key).data.push(item)
	})

	// 将以Map形式存储的分割后的数据转换为数组形式并放入processedData
	keyValueMap.forEach((value) => {
		splitArr.value.push(value)
	})
})
const submit = () => {
	emit("close")
}
const reset = () => {
	splitArr.value.forEach((group) => {
		group.ids = []
		group.value = []
		group.names = []
	})
	emit("updateGroupValue", getModelValue())
	submit()
}
</script>
<style lang="scss" scoped>
.group-content {
	max-height: 570rpx;
	.filter-group {
		padding: 24rpx;
		.group-title {
			font-size: 28rpx;
			font-weight: 500;
			padding-bottom: 24rpx;
		}
		.group-item {
			margin: 0 20rpx 20rpx 0;
			width: calc(25% - 16rpx);
			padding: 18rpx;
			line-height: 36rpx;
			text-align: center;
			background: rgba(241, 242, 245, 0.7);
			border-radius: 16rpx;
			&:nth-child(4n) {
				margin-right: 0;
			}
			&.selected {
				background: rgba(254, 224, 56, 0.2);
				position: relative;
				&::after {
					position: absolute;
					content: "";
					right: 0;
					bottom: 0;
					width: 28rpx;
					height: 22rpx;
					background: url(#{$imgBaseUrl}filter-icon.png);
					background-position: center center;
					background-size: cover;
				}
			}
		}
	}
}
</style>
